<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">校本实验基础信息</div>
        <div class="column-content">
          <a-descriptions bordered :labelStyle="{ width: '120px' }" :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
            <a-descriptions-item label="实验名称">{{
              datas?.name
            }}</a-descriptions-item>
            <a-descriptions-item label="实验ID">
              {{ datas?.customer_experiment_id }}
            </a-descriptions-item>
            <a-descriptions-item label="实验类型">{{
             datas?.experiment_category_name

            }}</a-descriptions-item>
            <a-descriptions-item label="共享教师">{{
              datas?.user?.real_name

            }}</a-descriptions-item>
            <a-descriptions-item label="入库时间">{{ datas?.created }}</a-descriptions-item>
            <a-descriptions-item label="启用状态">{{ datas?.enabled == true?'启用':'禁用' }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
const route = useRoute();
const query = computed(() => route.query);

const datas = ref();
const getData = async () => {
  let params = {
    customer_experiment_id: query.value.id,
  };
  const res = await api.apiCustomerExperimentFetchModelPost(params);
  datas.value = res.data;
};
onMounted(async () => {
  await getData();
});
</script>
